<template>
  <div class="header flex justify-between py-4 text-sm items-center">
    <div class="left">
      <slot name="headerLeft"></slot>
    </div>
    <div class="right flex items-center">
      <el-tooltip content="刷新" placement="top" :teleported="false">
        <el-icon :size="18" class="toolIcon" @click="emit('refreshTable')"
          ><Refresh
        /></el-icon>
      </el-tooltip>

      <el-tooltip content="密度" placement="top" :teleported="false">
        <div class="flex items-center toolIcon">
          <el-dropdown @command="clickSizeHandler" :teleported="false">
            <el-icon :size="15"> <svgIcon name="density"></svgIcon></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="-" :disabled="!baseSetting.size"
                  >默认({{ sizeDefault?.label }})</el-dropdown-item
                >
                <el-dropdown-item
                  command="default"
                  v-if="sizeDefault?.size !== 'default'"
                  :disabled="baseSetting.size == 'default'"
                  >中等</el-dropdown-item
                >
                <el-dropdown-item
                  command="small"
                  v-if="sizeDefault?.size !== 'small'"
                  :disabled="baseSetting.size == 'small'"
                  >紧凑</el-dropdown-item
                >
                <el-dropdown-item
                  command="large"
                  v-if="sizeDefault?.size !== 'large'"
                  :disabled="baseSetting.size == 'large'"
                  >宽松</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-tooltip>

      <el-tooltip content="表格设置" placement="top" :teleported="false">
        <div class="flex items-center toolIcon">
          <el-popover
            placement="bottom"
            trigger="click"
            :width="300"
            :teleported="false"
          >
            <SettingTable
              :columnTree="columnTree"
              :columnTreeLock="columnTreeLock"
              :initConfigList="initConfigList"
              @changeBaseSetting="changeBaseSetting"
              @reDrawColumn="reDrawColumn"
            ></SettingTable>
            <template #reference>
              <el-icon :size="18"><Setting /></el-icon>
            </template>
          </el-popover>
        </div>
      </el-tooltip>

      <el-tooltip content="全屏" placement="top" :teleported="false">
        <el-icon :size="18" class="toolIcon" @click="emit('fullScreen')"
          ><FullScreen
        /></el-icon>
      </el-tooltip>
    </div>
  </div>
</template>
<script setup lang="ts">
import { TableSettingsType } from "../interface/types";
import { useGlobalConfig } from "element-plus";
import SettingTable from "./settingTable.vue";
import { FullScreen, Setting, Refresh } from "@element-plus/icons-vue";
import svgIcon from "@/global/components/SvgIcon/index.vue";

type tSize = "" | "-" | "default" | "small" | "large";
interface tProps {
  baseSetting: TableSettingsType; //列表设置
  columnTree: any[];
  columnTreeLock: any[];
  initConfigList: any[];
}

const emit = defineEmits([
  "changeBaseSetting",
  "reDrawColumn",
  "refreshTable",
  "fullScreen",
]);

// ===============================================================================
// = tool
const getSizeDefault = (size?: tSize) => {
  if (!size || size == "default") {
    return {
      label: "中等",
      labelEn: "medium",
      size: "default",
    };
  } else if (size == "small") {
    return {
      label: "紧凑",
      labelEn: "small",
      size,
    };
  } else if (size == "large") {
    return {
      label: "宽松",
      labelEn: "large",
      size,
    };
  }
};

// ===============================================================================
// = data
const elGlobalConfig = useGlobalConfig();
const props = withDefaults(defineProps<tProps>(), {});
const sizeDefault = getSizeDefault(
  props.baseSetting.size || (elGlobalConfig.value || {}).size
);

// ===============================================================================
// = method
const changeBaseSetting = (value: TableSettingsType) => {
  emit("changeBaseSetting", value);
};
const reDrawColumn = (value: any) => {
  emit("reDrawColumn", value);
};
const clickSizeHandler = (value?: tSize) => {
  changeBaseSetting({
    ...props.baseSetting,
    size: value == "-" ? undefined : value,
  });
};
</script>

<style scoped lang="scss">
.toolIcon {
  margin-right: 20px;
  cursor: pointer;
  &:hover {
    color: var(--el-color-primary);
  }
}
</style>
